uniapp使用canvas+手势缩放 |
您所在的位置：网站首页 › canvas绘制图片 放大缩小 › uniapp使用canvas+手势缩放 |
uniapp使用canvas+手势缩放
|
功能介绍，工程类app，需要在手机端查看图纸，canvas绘制点，线。整理随意放大缩小。 
canvas绘制方法 //画布image drawImage(ctx, path, x, y, dWidth, dHeight) { ctx.drawImage(path, x, y, dWidth, dHeight) }, //圆角矩形 roundNode(ctx, x, y, width, height, radius, color) { //圆角矩形部分 ctx.beginPath() if (width < 2 * radius) radius = width / 2; if (height < 2 * radius) radius = height / 2; ctx.moveTo(x + radius, y); ctx.arcTo(x + width, y, x + width, y + height, radius); ctx.arcTo(x + width, y + height, x, y + height, radius); ctx.arcTo(x, y + height, x, y, radius); ctx.arcTo(x, y, x + width, y, radius); ctx.setFillStyle(color) ctx.fill() }, //绘制三角形 type:箭头朝向：bottom、right、left drawTriangle(ctx, x, y, color, type) { ctx.beginPath() let height = 10 //计算等边三角形的高 ctx.moveTo(x, y); //x y开始 switch (type) { case 'bottom': ctx.lineTo(x - height / 2, y) ctx.lineTo(x, y + height) ctx.moveTo(x, y) ctx.lineTo(x + height / 2, y) ctx.lineTo(x, y + height) break; case 'left': ctx.lineTo(x, y - height / 2) ctx.lineTo(x - height, y) ctx.moveTo(x, y) ctx.lineTo(x, y + height / 2) ctx.lineTo(x - height, y) break; case 'right': ctx.lineTo(x, y - height / 2) ctx.lineTo(x + height, y) ctx.moveTo(x, y) ctx.lineTo(x, y + height / 2) ctx.lineTo(x + height, y) break; default: break; } ctx.setFillStyle(color) ctx.fill(); }, drawText(ctx, text, x, y, color, size) { //文字部分 ctx.beginPath() ctx.setTextAlign('center') ctx.setFillStyle(color) ctx.setFontSize(size) const metrics = ctx.measureText(text) //文字统一偏移 ctx.fillText(text, x + metrics.width / 2, y + 17) }, // 绘制带箭头线 type:箭头朝向：bottom、right、left drawLine(ctx, fromX, fromY, toX, toY, color, type, isArrow = true, isDash = false) { ctx.beginPath() if (isDash) { ctx.setLineDash([10]); } else { ctx.setLineDash([]); } ctx.moveTo(fromX, fromY) ctx.lineTo(toX, toY) ctx.setLineWidth(1) ctx.setStrokeStyle(color) ctx.stroke() //是否绘制箭头 if (isArrow) { this.drawTriangle(ctx, toX, toY, color, type) } },手势缩放 拖拽功能实现 movable-view + movable-area 实现该功能 windowWidth、windowHeight 是计算屏幕占比 如果需要多设备可以参考 widths、heights 动态movable-view宽高 （我这里图纸太大需要一定缩放，并且movable-view内容最好跟movable-view宽高相同） //开始绘制 that.context = uni.createCanvasContext('myCanvas') //画背景 that.drawImage(that.context,that.infos.pic, 0, 0,that.widths, that.heights) //画节点 //开始节点 this.roundNode(this.context, 553, 38, 100, 36, 26, '#1EC1C3') this.node.push({ x:553, y:38, w:100, h:36, targe:0 }) that.context.draw() //s缩放比例 scaleChange(e) { this.scale = e.detail.scale } //点击事件 判断缩放比例 touchstart(e) { let x = e.touches[0].x let y = e.touches[0].y this.node.forEach(item => { if (x > item.x * this.scale && x < (item.x + item.w) * this.scale && y > item.y * this.scale && y < (item.y + item.h) * this.scale) { //在范围内，根据标记定义节点类型 this.lookDetial(item) } }) },目前就可以 最后需要注意 uniapp 对画布图片的大小，宽高，有很大的限制，如果页面没有显示，或者报错 80%就是这个原因 plus.io.resolveLocalFileSystemURL 安卓可以使用这个来压缩 |
【本文地址】
今日新闻 |
推荐新闻 |